<template>
	<view class="banner">

		<view class="header">
			<view class="header-title">
				{{message.name}}
			</view>
			<view class="header-line">
				<view style="color: #F1A721">
					<view>
						{{message.price}}
						<text class="shishi">实时</text>
					</view>
					<view class="textstyle">当前金价(元/克)</view>
				</view>
				<view >
					<view :style="message.margin>0? 'color:red' : 'color:green' ">{{message.margin}}</view>
					<view class="textstyle">今日涨幅(%)</view>
				</view>
			</view>
		</view>

		<view
			style="padding-bottom: 10rpx; width: 670rpx;margin: 0 auto;box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(225, 225, 225, 0.5);">
			<view class="charts-box">
				<view class="" style="display: flex;">
					<view class="goitem">
						金价走势
					</view>
				</view>
				<qiun-data-charts type="line" errorShow="true" :chartData="chartData" background="none"
					:animation="false" echartsApp="true" />
			</view>
			<view class="charts-text">
				<view class="charitem" :class="{charitemactiv:select == item.id}" v-for="item in time" :key="item.id"
					@tap="changetiem(item.id)">
					{{item.name}}
				</view>
			</view>
		</view>

		<view class="rulerbox">
			<view class="rulertext">交易规则</view>
			<view class="rulermin">
				<view class="ruleritem" v-for="item in rulerlist" :key="item.name">
					<view class="name">
						{{item.name}}
					</view>
					<view class="cont">
						{{item.cont}}
					</view>
				</view>
			</view>
		</view>

		<view class="server">
			本产品服务由中国民生银行提供
		</view>

		<view class="btn">
			<view class="out">
				卖出
			</view>
			<navigator url="/pages/buy1_thirteen/buy1_thirteen">
				<view class="in">
					买入
				</view>
			</navigator>
			
		</view>
	</view>
</template>

<script> 
	import { createNamespacedHelpers } from 'vuex'
	const { mapActions,mapState } = createNamespacedHelpers('gold')
	export default {
		data() {
			return {
				// ...mapState(['code']),
				historypric:{},
				message:{
					name:"",
					price:"",
					margin:"",
					color:""
				},
				select: 3,
				time: [{
						id: 1,
						name: "按年"
					},
					{
						id: 2,
						name: "按月"
					},
					{
						id: 3,
						name: "按日"
					},
					{
						id: 4,
						name: "按时"
					}
				],
				chartData: {
					categories: [],
					series: [{
						name: "黄金价格",
						data: [],

					}]
				},
				rulerlist: [{
						name: "购买金额",
						cont: "100元起购，且为1元的整倍数"
					},
					{
						name: "年龄范围",
						cont: "18岁及以上"
					},
					{
						name: "到账规则",
						cont: "正常2小时到账,买金失败资金会实时退款至原支付户，以实际到账时间为准。"
					},
					{
						name: "卖出规则",
						cont: "单笔最小卖出克重1克，当持有克重小于1克时,需一次全部赎回;单笔最大卖出克重10000克。卖出手续费为交易金额的0.3%，单笔最小卖出手续费0.01元。"
					},
					{
						name: "卖出到账时间",
						cont: "T日15:00前卖出,资金T+1日24点前账，实际以页面提示为准。"
					}
				]
			}
		},
		
		methods: {
			...mapActions(['getGoldmsg','goldHostprice']),
			changetiem(id) {
				this.select = id
			},
			toJSON() {
				return this;
			},
			edithistoryprice(){
				this.chartData.categories=[]
				this.chartData.series[0].data=[]
				switch(this.select){
					case 1:this.year();break;
					case 2:this.month();break;
					case 3:this.day();break;
					default:alert('暂无数据');
				}
			},
			year(){},
			month(){},
			day(){
				this.historypric.forEach(e=>{
					this.chartData.categories.push(e.days.substr(5,e.days.length-1))
					this.chartData.series[0].data.push(e.price)
				})
			}
		},
		computed:{
			...mapState(["code"])
		},
		async onShow(){
			const msg = await this.getGoldmsg(this.code)
			let str = msg.changeMargin
			str = str.substring(0,str.length-1)
			this.message = {
				name: msg.name,
				price:msg.lastPrice,
				margin:msg.changeMargin
			}
			
			const hostprice = await this.goldHostprice(this.code)
			this.historypric = hostprice;
			this.edithistoryprice()
			console.log(this.historypric)
		}
	}
</script>

<style>
	.banner {
		background: url("../../static/image/img_bg_huangjin@2x.png");
		background-size: 750rpx 282rpx;
		height: 282rpx;
		padding: 192rpx 40rpx 10rpx 40rpx;
	}

	.header {
		padding: 40rpx;
		width: 670rpx;
		min-height: 20rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(225, 225, 225, 0.5);
	}

	.header-title {
		font-size: 32rpx;
		color: #2a2d32;
		margin-bottom: 25rpx;
	}

	.shishi {
		background-color: rgba(241, 167, 33, 0.1);
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #f1a721;
		vertical-align: middle;
	}

	.header-line {
		display: flex;
		justify-content: space-between;
		font-size: 56rpx;
	}

	.textstyle {
		font-size: 24rpx;
		color: #cdcdcd;
	}

	.trend {
		height: 500rpx;
		width: 500rpx;
	}

	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box {
		margin-top: 24rpx;
		margin-bottom: 100rpx;
		width: 670rpx;
		height: 470rpx;
		background-color: #ffffff;
	}

	.charitem {}

	.charts-text {
		display: flex;
		text-align: center;
		background-color: #fff;
		/* box-shadow: 0rpx 8rpx 0rpx 0rpx rgba(225, 225, 225, 0.5); */
	}

	.goitem {
		font-size: 28rpx;
		color: #2e3003;
		margin: 24rpx;
	}

	.goitemactiv {
		border-bottom: 2rpx solid #89a6fa;
	}

	.charts-text {

		width: 538rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 34rpx;
		border: solid 2rpx #e4e4e4;
		text-align: center;
		margin: 24rpx auto;
		display: flex;
	}

	.charitem {
		flex: 1;
		text-align: center;
	}

	.charitemactiv {
		background-color: #f1a721;
		border-radius: 34rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.rulerbox {
		width: 670rpx;
		background-color: #ffffff;

	}

	.rulertext {
		width: 144rpx;
		height: 50rpx;
		font-family: PingFang SC;
		font-size: 36rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #373c46;
		margin-top: 20rpx;
		font-weight: 800;
	}

	.rulermin {
		padding: 20rpx;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(225, 225, 225, 0.5);
	}

	.ruleritem {
		display: flex;
		margin: 10rpx 0;
	}

	.name {
		flex-shrink: 0;
		width: 150rpx;
		font-family: PingFang SC;
		font-size: 24rpx;
		color: #80868e;
		margin-right: 40rpx;
	}

	.cont {

		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #2e3033;
	}

	.server {
		margin: 32rpx;
		text-align: center;
		color: #cacaca;
		font-size: 24rpx;
	}

	.btn {
		display: flex;
		margin: 0 auto;
		line-height: 98rpx;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.out {
		width: 336rpx;
		height: 98rpx;
		background-color: rgba(241, 167, 33, 0.1);
		border-radius: 12rpx 0rpx 0rpx 12rpx;
		font-size: 40rpx;
		color: #f1a721;
	}

	.in {
		width: 336rpx;
		height: 98rpx;
		background-color: #f1a721;
		border-radius: 0rpx 12rpx 12rpx 0rpx;
		font-size: 40rpx;
		color: #fff;
	}
</style>
